<template>
	<view class="px-2">
		<!-- 自定义导航栏 -->
		<!-- height: var(--status-bar-height); 自动匹配各个手机端的高度 -->
		<view class="status_bar" style="height: var(--status-bar-height); width: 100%"></view>

		<view class="iconfont icon-quxiao text-left flex align-center" @click="back"></view>

		<view class="text-muted text-center" style="font-size: 50rpx; padding-top: 180rpx; padding-bottom: 100rpx">{{ status ? '验证码登录' : '账号密码登录' }}</view>

		<template v-if="status">
			<view class="flex flex-column justify-center">
				<view class="border-bottom flex align-center">
					<view class="pr-1">+86</view>
					<input type="text" class="border-bottom flex-1" v-model="phone" style="height: 80rpx" placeholder="手机号" />
				</view>

				<view class="border-bottom flex align-center mt-2">
					<input class="flex-1" type="text" style="height: 80rpx" v-model="yzm" placeholder="请输入验证码" />
					<view
						class="flex justify-center align-center font-sm bg-main-disabled text-white"
						style="width: 150rpx; height: 50rpx"
						:style="time > 0 ? { backgroundColor: '#F87F97!important' } : ''"
						:class="disable ? 'bg-main' : ''"
						@click="getyzm"
					>
						{{ time > 0 ? time : '获取验证码' }}
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="flex flex-column justify-center">
				<input type="text" class="border-bottom" v-model="username" style="height: 80rpx" placeholder="昵称/手机号/邮箱" />

				<view class="border-bottom flex align-center mt-2">
					<input class="flex-1" type="text" v-model="password" style="height: 80rpx" placeholder="密码" />
					<view class="flex justify-center align-center font-sm" style="width: 150rpx; height: 50rpx" @click="torevisepass">忘记密码</view>
				</view>
			</view>
		</template>
		<view class="pb-4" style="margin-top: 130rpx">
			<button style="border-radius: 50rpx" class="text-light bg-main-disabled mt-3" :class="istrue ? 'bg-main' : ''" @click="login">登录</button>
		</view>

		<view class="flex justify-center align-center py-2">
			<view class="" @click="changeloginmethod">
				{{ !status ? '验证码登录' : '账号密码登录' }}
			</view>
			<view class="px-2">|</view>
			<view class="">登录遇到问题</view>
		</view>

		<view class="py-2 mt-3 flex justify-center align-center text-light-muted">——社交账号登录——</view>

		<view class="flex justify-around align-center mt-3">
			<block v-for="(item, index) in list" :key="index">
				<view class="flex-column align-center justify-center" @click="otherlogin(item.title)">
					<view class="flex align-center justify-center rounded-circle" style="width: 100rpx; height: 100rpx" :style="{ backgroundColor: item.bgcolor }">
						<text style="color: white" class="iconfont font-lg" :class="item.icon"></text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import { otherlogin, phonelogin, Usernamelogin, getcode } from '@/request/Api/login.js';
export default {
	data() {
		return {
			status: true,
			phone: '',
			username: '',
			password: '',
			yzm: '',
			time: 0,
			list: [],
			UserBind: {
				type: '',
				openid: '',
				nickname: '',
				avatarurl: ''
			}
		};
	},
	onLoad() {
		uni.getProvider({
			service: 'oauth',
			success: (res) => {
				res.provider.forEach((item) => {
					switch (item) {
						case 'weixin':
							this.list.push({
								title: 'weixin',
								icon: 'icon-weixin',
								bgcolor: '#2ad19b'
							});
							break;
						case 'qq':
							this.list.push({
								title: 'qq',
								icon: 'icon-QQ',
								bgcolor: '#5280ce'
							});
							break;
						case 'sinaweibo':
							this.list.push({
								title: 'sinaweibo',
								icon: 'icon-xinlangweibo',
								bgcolor: '#ee5e5e'
							});
							break;
						default:
							break;
					}
				});
			}
		});
	},
	methods: {
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		otherlogin(type) {
			this.UserBind.type = type;
			uni.login({
				provider: type,
				success: (res) => {
					this.UserBind.openid = res.authResult.openid;
					uni.getUserInfo({
						provider: type,
						success: (infoRes) => {
							this.UserBind.nickname = infoRes.userInfo.nickName;
							this.UserBind.avatarurl = infoRes.userInfo.avatarUrl;
							otherlogin(this.UserBind)
								.then((res) => {
									if (res.code === 0) {
										uni.showToast({
											title: '请绑定手机号',
											icon: 'none',
											success: () => {
												uni.navigateTo({
													url: '/pages/bindphone/bindphone?userInfo=' + JSON.stringify(this.UserBind)
												});
											}
										});
									} else {
										this.showlogin(res);
									}
								})
								.catch((err) => {
									console.log(err);
								});
						}
					});
				},
				fail: () => {},
				complete: () => {}
			});
		},
		login() {
			if (this.istrue) {
				switch (this.status) {
					case true:
						phonelogin({
							phone: this.phone,
							code: this.yzm
						})
							.then((res) => {
								this.showlogin(res);
							})
							.catch((err) => {
								console.log(err);
							});
						break;
					case false:
						Usernamelogin({
							username: this.username,
							password: this.password
						})
							.then((res) => {
								this.showlogin(res);
							})
							.catch((err) => {
								console.log(err);
							});
						break;
					default:
						break;
				}
			}
		},
		torevisepass() {
			uni.navigateTo({
				url: '/pages/revisepass/revisepass'
			});
		},
		changeloginmethod() {
			this.clear();
			this.status = !this.status;
		},
		showlogin(res) {
			if (res.code !== 1) {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: '登录成功',
					icon: 'none',
					success: () => {
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('userInfo', res.data.userInfo);
						this.$store.commit('updateUserId', res.data.userInfo.id);
						uni.navigateBack({
							delta: 1
						});
						// 初始化用户登录状态
						this.$store.dispatch('initUser');
					}
				});
			}
		},
		clear() {
			this.phone = '';
			this.yzm = '';
			this.username = '';
			this.password = '';
		},
		getyzm() {
			if (this.time > 0) {
				return;
			}
			if (this.checkPhone()) {
				getcode({ phone: this.phone }).then((res) => {
					uni.showToast({
						title: '验证码已发送',
						icon: 'none'
					});
					this.time = 60;
					let timer = setInterval(() => {
						this.time--;
						if (this.time <= 0) {
							clearInterval(timer);
						}
					}, 1000);
				});
			}
		},
		checkPhone() {
			let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
			if (reg.test(this.phone)) {
				return true;
			}
			return false;
		}
	},
	computed: {
		disable() {
			return this.checkPhone();
		},
		istrue() {
			return (this.phone !== '' && this.yzm !== '' && this.checkPhone()) || (this.username !== '' && this.password !== '');
		}
	}
};
</script>

<style></style>
